/**
 * 货品维护 - 货品管理
 * @author xiaoxujs
 */

import { Button, ConfigProvider, Input, message, Modal, Table, TableProps } from "antd";
import { ProductManagementBox } from "./style";
import { useCallback, useEffect, useState } from "react";
import { IPlanQueryGoods, IPlanQueryGoodsParams } from "../../../type/productMaintenance";
import { getPlanDeleteGoods, getPlanQueryGoods } from "../api";
import { INoFenye } from "../../../type/commit";
import { useWindowFontSize } from "../../../assets/fun/Antd/configprovider";
import AddChangeModule from './components/AddChangeModule'

const { Search } = Input;

const ProductManagement = () => {

    const [modal, contextHolder] = Modal.useModal();

    const [listData, setListData] = useState<IPlanQueryGoods[]>([]);
    const [tableLoading, setTableLoading] = useState(false); //tableLoading
    const [searchValue, setSearchValue] = useState<string>(''); //关键字
    const [addChangeShow, setAddChangeShow] = useState(false); //  添加编辑弹窗
    const [clickData, setClickData] = useState<IPlanQueryGoods>(); //   点击数据



    const listFun = useCallback(async (params?: IPlanQueryGoodsParams) => {
        setTableLoading(true);
        const { code, msg, data } = (await getPlanQueryGoods(
            params
        )) as INoFenye<IPlanQueryGoods>;
        if (code === 20000) {
            setListData(data);
            setTableLoading(false);
        } else {
            message.error(msg);
        }
    }, []);

    useEffect(() => {
        listFun();
    }, [listFun])
    // 获取
    const handleSearch = (value: string) => {
        listFun({ likeGoodsName: value });
    }
    // 添加编辑弹窗回调
    const handleAddChangeCallback = () => {
        setAddChangeShow(false);
        listFun();
        setClickData(undefined);
    }
    //删除
    const handleDelete = async (id: string) => {
        console.log(id)
        const confirmed = await modal.confirm({
            title: '确定要删除当前货品吗？',
        });
        if(confirmed) {
         const {code, msg} = await getPlanDeleteGoods({id}) as {code: number, msg: string};
         if(code === 20000) {
            message.success('删除成功');
            listFun({likeGoodsName: searchValue});
         }else{
            message.error(msg);
         }
        }
        console.log('Confirmed: ', confirmed);
    }

    const columns: TableProps<IPlanQueryGoods>['columns'] = [
        {
            title: '序号',
            align: 'center',
            render: (_, record, index) => <span>{index + 1}</span>
        },
        {
            title: '货品名称',
            dataIndex: 'goodsName',
            align: 'center',
        },
        {
            title: '操作',
            align: "center",
            render: (_, record) => <>
                <Button type="link" onClick={() => {
                    setClickData(record);
                    setAddChangeShow(true);
                }} >编辑</Button>
                <Button type="link" onClick={() => handleDelete(record.id)}>
                    删除
                </Button>
            </>
        },
    ];

    return <ProductManagementBox>
        <div className="title">
            货品列表
        </div>
        <div className="add_search_box">
            <Button type='primary' icon={<span className="iconfont">&#xe620;</span>} onClick={() => setAddChangeShow(true)} >增加货品</Button>
            <Search
                value={searchValue}
                style={{ width: '27.3rem' }}
                placeholder="请输入货品名称"
                allowClear
                onChange={(e) => setSearchValue(e.target.value)}
                onSearch={(value) => handleSearch(value)}
            />
        </div>
        <ConfigProvider theme={{
            components: {
                Table: {
                    headerColor: '#8B9BAC',
                    cellFontSize: useWindowFontSize(14),
                    cellPaddingBlock: 7
                }
            }
        }}>
            <Table<IPlanQueryGoods>
                pagination={false}
                rowKey='id'
                columns={columns}
                dataSource={listData}
                loading={tableLoading}
                style = {{border: '0.1rem solid #F3F3F3'}}
                // bordered
            />
        </ConfigProvider>
        <AddChangeModule open={addChangeShow} clickData={clickData} handleCallback={handleAddChangeCallback} />
        {contextHolder}
    </ProductManagementBox>
}

export default ProductManagement;